import React, { ReactElement, useContext, useMemo } from 'react';
import { View, Text, Image } from 'react-native';

import styles from './style';
import Button from '../../../../components/Button';
import { Store } from '../../reducer';
import {
  EDIT_CONTENT_WIDTH,
  CONTENT_WIDTH,
  EDIT_PROGRESS_WIDTH,
  PROGRESS_WIDTH
} from '../../constant';
import {
  checkDownloading,
  calFileSize,
  calBytes,
  setSelectedAllDownloading
} from '../../actions';
import { APP_RED } from '../../../../constant/color';
import { downloadSelected } from '../../../../constant/resource';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const {
    downloadingList,
    currentDownload,
    netSpeed,
    selectedAllDownloading,
    isEdit
  } = state;
  let {
    parentId,
    parentTitle,
    progress,
    totalSize,
    isPaused,
    isFailed
  } = currentDownload;

  if (parentId === 0) {
    [
      { parentId, parentTitle, progress, totalSize, isPaused, isFailed }
    ] = downloadingList;
  }

  const haveDone = progress >= 1;

  const statusStyle =
    (isPaused || isFailed) && !haveDone ? { color: APP_RED } : {};
  const progressStyle =
    (isPaused || isFailed) && !haveDone ? { backgroundColor: APP_RED } : {};

  let statusDesc = `${calBytes(netSpeed)}/S`;
  if (isPaused && !haveDone) {
    statusDesc = '下载暂停';
  } else if (isFailed && !haveDone) {
    statusDesc = '下载失败';
  }

  const contentWidth = isEdit ? EDIT_CONTENT_WIDTH : CONTENT_WIDTH;
  const progressLineWidth = isEdit ? EDIT_PROGRESS_WIDTH : PROGRESS_WIDTH;

  return useMemo(
    (): ReactElement => (
      <Button
        style={styles.container}
        onPress={(): void => {
          if (isEdit) {
            setSelectedAllDownloading(!selectedAllDownloading);
          } else {
            checkDownloading();
          }
        }}
      >
        {isEdit ? (
          <View style={styles.selectedBox}>
            {selectedAllDownloading && (
              <Image style={styles.selectedIcon} source={downloadSelected} />
            )}
          </View>
        ) : null}
        <View style={[styles.content, { width: contentWidth }]}>
          <Text style={styles.desc}>正在缓存</Text>
          <Text style={styles.title} numberOfLines={1}>
            {parentTitle}
          </Text>
          <View style={styles.info}>
            <Text style={[styles.status, statusStyle]}>{statusDesc}</Text>
            <Text style={styles.status}>
              {calBytes(progress * totalSize)} / {calBytes(totalSize)}
            </Text>
          </View>
          <View style={[styles.loadProgress, { width: progressLineWidth }]}>
            <View
              style={[
                styles.progress,
                progressStyle,
                { width: progress * progressLineWidth }
              ]}
            />
          </View>
          <View style={styles.dot}>
            <Text style={styles.dotDesc}>
              {downloadingList.length > 9 ? '···' : downloadingList.length}
            </Text>
          </View>
        </View>
      </Button>
    ),
    [
      contentWidth,
      downloadingList.length,
      isEdit,
      parentTitle,
      progress,
      progressLineWidth,
      progressStyle,
      selectedAllDownloading,
      statusDesc,
      statusStyle,
      totalSize
    ]
  );
};
